@import './variables.scss';

 /* 滚动条 */
.ApplicationEditor {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    user-select: none;
  }

  *::-webkit-scrollbar {
    display: block;
    width: 2px;
    height: 2px;
  }

  *::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-corner {
    background: transparent;
  }

  .form-item {
    margin-bottom: 10px;
  }

  .form-item:last-child {
    margin-bottom: 0;
  }

  .split-title {
    display: block;
    margin: 6px 0;
    font-size: 12px;
    color: $text-color-gray;
  }
}

/* ElementUI 样式重置 */
.ApplicationEditor, .mani {
  .el-button {
    border-radius: 0px;
  }

  @mixin button($bg-color) {
    &,
    &:focus {
      background: $bg-color;
      border-color: $bg-color;
      color: $text-color;
    }
    &:hover {
      background: lighten($bg-color, 12.5%) !important;
      border-color: lighten($bg-color, 12.5%) !important;
    }
    &:active {
      background: lighten($bg-color, 7.5%) !important;
      border-color: lighten($bg-color, 7.5%) !important;
    }
  }

  .el-button--default {
    @include button($button-background)
  }

  .el-button--default.el-button--primary {
    @include button($primary-color)
  }
  // .el-button--default,
  // .el-button--default:focus {
  //   background: $button-background;
  //   border-color: $button-background;
  //   color: $text-color;
  // }

  // .el-button--default:hover {
  //   background: lighten($button-background, 12.5%) !important;
  //   border-color: lighten($button-background, 12.5%) !important;
  // }

  // .el-button--default:active {
  //   background: lighten($button-background, 7.5%) !important;
  //   border-color: lighten($button-background, 7.5%) !important;
  // }

  .el-button.el-button--mini {
    height: 24px;
    padding: 0px 10px;
    line-height: 24px;
  }

}

/* el-input */
.ApplicationEditor, .mani {
  .el-input__inner {
    background:$input-background-color;
    color: $text-color;
    border-color: $input-border-color;
    border-radius: 0px;
  }

  .el-input__inner:hover {
    border-color: $primary-color;
  }

  .el-input.is-disabled .el-input__inner {
    background:$input-background-color;
    color: $text-color;
    border-color:$input-background-color;
    border-radius: 0px;
  }

  .el-input.el-input--mini.is-disabled {
    opacity: 0.5;
  }

  .el-input--mini .el-input__icon {
    line-height: 24px;
    color: $text-color;
  }

  .el-input--mini .el-input__inner {
    height: 24px;
    line-height: 22px;
    text-align: left;
    padding-left: 5px;
    &::-webkit-input-placeholder {
      position: relative;
      top: 1px;
      color: $text-color-gray;
    }
  }

  .el-input--prefix .el-input__inner {
    padding-left: 30px;
  }

  .el-input-number--mini {
    height: 24px;
    line-height: 22px;
  }

  .el-input-number.is-controls-right .el-input-number__decrease,
  .el-input-number.is-controls-right .el-input-number__increase {
    height: 50%;
    background: transparent;
    border: none;
    border-left: solid 1px $input-border-color;
    color: $text-color-gray;
  }
}

/* el-collapse */
.ApplicationEditor, .mani {
  .el-collapse {
    border: none;
  }
  .el-collapse-item__header {
    height: $header-height;
    line-height: $header-height;
    padding-left: 15px;
    background: $panel-background-color;
    border: none;
    color: $text-color !important;
    font-weight: bold;
    font-size: inherit;
    letter-spacing: 2px;
  }
  .el-collapse-item__wrap,
  .el-collapse-item__content {
    background: transparent;
    border: none;
  }
  .el-collapse-item__content {
    padding: 5px 0 5px 15px;
    color: $text-color;
  }
}

/* el-message-box */
.ApplicationEditor, .mani {
  .el-message-box {
    background: $panel-background-color;
    border-color: $border-color;
  }
  .el-message-box__title,
  .el-message-box__message {
    color: $text-color;
  }
}

/* el-message-box */
.ApplicationEditor, .mani {
  .el-collapse {
    border: none;
  }

  .el-collapse-item__header {
    position: relative;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
    background: transparent;
    padding-left: 24px;
    border: none;
    color: $text-color-gray;
    font-size: 12px;
  }

  .el-collapse-item__arrow {
    position: absolute;
    font-size: 12px;
    left: 6px;
    top: 10px;
    color: rgb(192,196,204);
  }

  .el-collapse-item__wrap {
    background: transparent;
    border: none;
  }

  .el-collapse-item__content {
    color: inherit;
    padding: 0 0 0;
  }

  .el-collapse-item__arrow {
    margin: 0 11px 0 auto;
  }
}
